<template>
  <div class="zhcoupon">
    <div v-if="loading" class="skeleton-container" style="margin-top: 20rem">
      <van-skeleton title :row="20"/>
    </div>
    <div v-else>
      <div class="box-top">
        <button  @click="goBack" >
          <svg
            t="1733974624380"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2082"
            width="16"
            height="16 "
          >
            <path
              d="M744.3372563 1017.13692445c11.1289837 0 22.2701037-4.2477037 30.76551111-12.74311112 16.99081482-16.99081482 16.99081482-44.54020741 0-61.51888592L345.02883555 512.80099555 775.10276741 82.7392c16.99081482-16.97867852 16.99081482-44.54020741 0-61.51888592-16.99081482-16.99081482-44.52807111-16.99081482-61.51888593 0L252.74443852 482.04762075a43.51469037 43.51469037 0 0 0 0 61.53102222l460.83944296 460.81517036c8.48327111 8.49540741 19.62439111 12.74311111 30.75337482 12.74311112z"
              fill="#2c2c2c"
              p-id="2083"
            />
          </svg>
        </button>
        <h1>领取优惠券</h1>
      </div>
      <van-tabs v-model:active="activeName">
        <van-tab title="通用卷" name="a">
          
            <div class="left">
              <div class="box">
                <h1>一番海淘9折券</h1>
                <p>2024.12.14 - 2024.12.17</p>
              </div>
              <div class="right">
                <h3>10%</h3>
                <p>OFF</p>
              </div>
              <div class="threshold">
                <p>无门槛</p>
              </div>
            </div>

            <div class="xx1">
              <h1>使用范围:自营商城通用</h1>
              <button>领取</button>
            </div>

            <div class="left-1">
              <div class="box-1">
                <h1>限定站点9折券</h1>
                <p>2024.12.14 - 2024.12.17</p>
              </div>
              <div class="right-1">
                <h3>10%</h3>
                <p>OFF</p>
              </div>
              <div class="threshold-1">
                <p>满40000日元可用,最高抵扣10000日元</p>
              </div>
            </div>
            <div class="xx1-1">
              <h1>
                使用范围:骏河屋,雅虎闲置,ANIMATE,乐天...
                <img
                  style="width: 8rem; height: 8rem"
                  src="https://mall.leyifan.com/static/h5/new_images/arrow_down.png"
                  alt=""
                />
              </h1>
              <button>领取</button>
            </div>

            <div class="left-2">
              <div class="box-2">
                <h1>限定站点95折券</h1>
                <p>2024.12.14 - 2024.12.17</p>
              </div>
              <div class="right-2">
                <h3>5%</h3>
                <p>OFF</p>
              </div>
              <div class="threshold-2">
                <p>无门槛</p>
              </div>
            </div>
            <div class="xx1-2">
              <h1>
                使用范围:骏河屋,雅虎闲置,ANIMATE,乐天...
                <img
                  style="width: 8rem; height: 8rem"
                  src="https://mall.leyifan.com/static/h5/new_images/arrow_down.png"
                  alt=""
                />
              </h1>
              <button>领取</button>
            </div>

            <div class="left-3">
              <div class="box-3">
                <h1>RAKUMA 2000日元券</h1>
                <p>2024.12.14 - 2024.12.17</p>
              </div>
              <div class="right-3">
                <h3>2000</h3>
                <p>日元</p>
              </div>
              <div class="threshold-3">
                <p>满20000日元可用</p>
              </div>
            </div>
            <div class="xx1-3">
              <h1>使用范围:RAKUMA通用</h1>
              <button>领取</button>
            </div>

            <div class="left-4">
              <div class="box-4">
                <h1>RAKUMA1000日元券</h1>
                <p>2024.12.14 - 2024.12.17</p>
              </div>
              <div class="right-4">
                <h3>1000</h3>
                <p>日元</p>
              </div>
              <div class="threshold-4">
                <p>满120000日元可用</p>
              </div>
            </div>
            <div class="xx1-4">
              <h1>使用范围:RAKUMA通用</h1>
              <button>领取</button>
            </div>

            <div class="left-5">
              <div class="box-5">
                <h1>RAKUMA400日元券</h1>
                <p>2024.12.14 - 2024.12.17</p>
              </div>
              <div class="right-5">
                <h3>400</h3>
                <p>日元</p>
              </div>
              <div class="threshold-5">
                <p>满5000日元可用</p>
              </div>
            </div>
            <div class="xx1-5">
              <h1>使用范围:RAKUMA通用</h1>
              <button>领取</button>
            </div>

            <div class="left-6">
              <div class="box-6">
                <h1>煤炉2500日元券</h1>
                <p>2024.12.14 - 2024.12.17</p>
              </div>
              <div class="right-6">
                <h3>2500</h3>
                <p>日元</p>
              </div>
              <div class="threshold-6">
                <p>满25000日元可用</p>
              </div>
            </div>
            <div class="xx1-6">
              <h1>使用范围:煤炉通用</h1>
              <button>领取</button>
            </div>

            <div class="left-7">
              <div class="box-7">
                <h1>煤炉900日元券</h1>
                <p>2024.12.14 - 2024.12.17</p>
              </div>
              <div class="right-7">
                <h3>2500</h3>
                <p>日元</p>
              </div>
              <div class="threshold-7">
                <p>满10000日元可用</p>
              </div>
            </div>
            <div class="xx1-7">
              <h1>使用范围:煤炉通用</h1>
              <button>领取</button>
            </div>

            <div class="left-8">
              <div class="box-8">
                <h1>煤炉200日元券</h1>
                <p>2024.12.14 - 2024.12.17</p>
              </div>
              <div class="right-8">
                <h3>200</h3>
                <p>日元</p>
              </div>
              <div class="threshold-8">
                <p>满3000日元可用</p>
              </div>
            </div>
            <div class="xx1-8">
              <h1>使用范围:煤炉通用</h1>
              <button>领取</button>
            </div>

            <div class="ending">
              <h1>哼~我也是有底线的~</h1>
            </div>
        </van-tab>
        <van-tab title="商品卷" name="b">
            <div class="q">
              <img
                style="width: 115rem; height: 115rem; position: absolute; top: 170rem; left: 131rem"
                src="https://mall.leyifan.com/static/h5/new_images/coupon_empty.png"
                alt=""
              />
            </div>
            <div class="b">
              <h1
                style="
                  width: 115rem;
                  height: 115rem;
                  position: absolute;
                  top: 270rem;
                  left: 131rem;
                  color: rgba(0, 0, 0, 0.3);
                "
              >
                暂无可用优惠券
              </h1>
            </div>
        </van-tab>
        <van-tab title="品类卷" name="c">
            <div class="q">
              <img
                style="width: 115rem; height: 115rem; position: absolute; top: 170rem; left: 131rem"
                src="https://mall.leyifan.com/static/h5/new_images/coupon_empty.png"
                alt=""
              />
            </div>
            <div class="b">
              <h1
                style="
                  width: 115rem;
                  height: 115rem;
                  position: absolute;
                  top: 270rem;
                  left: 131rem;
                  color: rgba(0, 0, 0, 0.3);
                "
              >
                暂无可用优惠券
              </h1>
            </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const loading = ref(true)
setTimeout(() => {
  loading.value = false
}, 1000)

const activeName = ref('a')

const router = useRouter()
const goBack = () => {
  router.push( '/' )
}
</script>


<style scoped lang="less">
.zhcoupon {
  width: 100%;
  height: 1240rem;
  /* background-image: url(https://mall.leyifan.com/static/h5/new_images/shopping_bg.png); */
  background-repeat: no-repeat;
  background-size: 100% 240rem;
  background-color: #f5f5f5;
  /* background-color: #fff; */

  position: absolute;
  left: 0;
  top: 0;
}

.box-top {
  display: flex;
  flex-direction: row;
  /* 水平排列 */
  justify-content: space-between;
  /* 左右两端对齐 */
  margin-left: 20rem;
  /* 调整按钮的左边距 */
  margin-top: 10rem;

  h1 {
    text-align: center;

    flex: 1;
    font-size: 18rem;
    color: rgb(51, 51, 51);
    font-weight: 700;
  }
}

button {
  background-color: transparent;
  border: none;

  svg {
    margin-left: -10rem;
  }
}

.left {
  height: 78rem;
  background-size: 100% 100%;
  position: relative;
  background-image: url(https://mall.leyifan.com/static/h5/images/couponItemBg.png);
  margin-top: 10rem;
  margin-left: 20rem;
  min-height: 30rem;
  width: 333rem;
  display: flex;
  align-content: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex-direction: row;

  /* margin-top: 3rem; */
  .box {
    margin-top: -19rem;
    margin-left: 15rem;

    h1 {
      font-size: 14rem;
      color: #333;

      line-height: 20rem;
    }
  }

  p {
    font-size: 11rem;
    color: #aaa;
    font-weight: 500;
    margin-top: 2rem;
  }

  .right {
    position: absolute;
    right: 10rem;
    top: 5rem;
    width: 60rem;
    height: 30rem;
    background-color: #fff;
    border-radius: 0rem 7rem 7rem 0rem;
    display: flex;
    align-items: center;
    justify-content: center;

    h3 {
      color: #ff3d58;
      font-size: 20rem;
      font-weight: 700;
    }

    p {
      font-size: 10rem;
      margin-left: 1rem;
      color: #ff3d58;
    }
  }
}

.xx1 {
  width: 333rem;
  min-height: 30rem;
  background-color: #fff;
  margin-left: 20rem;
  border-radius: 5rem;
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;

  h1 {
    margin-left: 15rem;
    font-size: 12rem;
    color: #aaa;
  }

  button {
    background-color: #ff3d58;
    color: #fff;
    width: 60rem;
    height: 22rem;
    border-radius: 50rem;
    border: none;
    font-size: 12rem;
    line-height: 22rem;
    margin-right: 15rem;
  }
}

.threshold p {
  position: absolute;
  right: 10rem;
  top: 36rem;
  color: #ff3d58;
}

.left-1 {
  height: 78rem;
  background-size: 100% 100%;
  position: relative;
  background-image: url(https://mall.leyifan.com/static/h5/images/couponItemBg.png);
  margin-top: 10rem;
  margin-left: 20rem;
  /* min-height: 30rem; */
  width: 333rem;
  display: flex;
  align-content: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex-direction: row;

  /* margin-top: 3rem; */
  .box-1 {
    margin-top: -19rem;
    margin-left: 13rem;

    h1 {
      font-size: 14rem;
      color: #333;

      line-height: 20rem;
    }
  }

  p {
    font-size: 11rem;
    color: #aaa;
    font-weight: 500;
    margin-top: 2rem;
  }

  .right-1 {
    position: absolute;
    right: 10rem;
    top: 5rem;
    width: 60rem;
    height: 30rem;
    background-color: #fff;
    border-radius: 0rem 7rem 7rem 0rem;
    display: flex;
    align-items: center;
    justify-content: center;

    h3 {
      color: #ff3d58;
      font-size: 20rem;
      font-weight: 700;
    }

    p {
      font-size: 10rem;
      color: #ff3d58;
      margin-left: 1rem;
    }
  }
}

.xx1-1 {
  width: 333rem;
  min-height: 30rem;
  background-color: #fff;
  margin-left: 20rem;
  border-radius: 5rem;
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;

  h1 {
    margin-left: 15rem;
    font-size: 11rem;
    color: #aaa;
  }

  button {
    background-color: #ff3d58;
    color: #fff;
    width: 60rem;
    height: 22rem;
    border-radius: 50rem;
    border: none;
    font-size: 12rem;
    line-height: 22rem;
    margin-right: 15rem;
  }
}
.threshold-1 {
  P {
    font-size: 11rem;

    position: absolute;
    right: 10rem;
    top: 36rem;
    color: #ff3d58;
  }
}

.left-2 {
  height: 78rem;
  background-size: 100% 100%;
  position: relative;
  background-image: url(https://mall.leyifan.com/static/h5/images/couponItemBg.png);
  margin-top: 10rem;
  margin-left: 20rem;
  /* min-height: 30rem; */
  width: 333rem;
  display: flex;
  align-content: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex-direction: row;

  /* margin-top: 3rem; */
  .box-2 {
    margin-top: -19rem;
    margin-left: 13rem;

    h1 {
      font-size: 14rem;
      color: #333;

      line-height: 20rem;
    }
  }

  p {
    font-size: 11rem;
    color: #aaa;
    font-weight: 500;
    margin-top: 2rem;
  }

  .right-2 {
    position: absolute;
    right: 10rem;
    top: 5rem;
    width: 60rem;
    height: 30rem;
    background-color: #fff;
    border-radius: 0rem 7rem 7rem 0rem;
    display: flex;
    align-items: center;
    justify-content: center;

    h3 {
      color: #ff3d58;
      font-size: 20rem;
      font-weight: 700;
    }

    p {
      font-size: 10rem;
      color: #ff3d58;
      margin-left: 1rem;
    }
  }
}

.xx1-2 {
  width: 333rem;
  min-height: 30rem;
  background-color: #fff;
  margin-left: 20rem;
  border-radius: 5rem;
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;

  h1 {
    margin-left: 15rem;
    font-size: 11rem;
    color: #aaa;
  }

  button {
    background-color: #ff3d58;
    color: #fff;
    width: 60rem;
    height: 22rem;
    border-radius: 50rem;
    border: none;
    font-size: 12rem;
    line-height: 22rem;
    margin-right: 15rem;
  }
}
.threshold-2 {
  P {
    font-size: 11rem;

    position: absolute;
    right: 10rem;
    top: 36rem;
    color: #df0707;
  }
}

.left-3 {
  height: 78rem;
  background-size: 100% 100%;
  position: relative;
  background-image: url(https://mall.leyifan.com/static/h5/images/couponItemBg.png);
  margin-top: 10rem;
  margin-left: 20rem;
  /* min-height: 30rem; */
  width: 333rem;
  display: flex;
  align-content: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex-direction: row;

  /* margin-top: 3rem; */
  .box-3 {
    margin-top: -19rem;
    margin-left: 13rem;

    h1 {
      font-size: 14rem;
      color: #333;

      line-height: 20rem;
    }
  }

  p {
    font-size: 11rem;
    color: #aaa;
    font-weight: 500;
    margin-top: 2rem;
  }

  .right-3 {
    position: absolute;
    right: 10rem;
    top: 5rem;
    width: 60rem;
    height: 30rem;
    background-color: #fff;
    border-radius: 0rem 7rem 7rem 0rem;
    display: flex;
    align-items: center;
    justify-content: center;

    h3 {
      color: #ff3d58;
      font-size: 20rem;
      font-weight: 700;
      margin-left: -7rem;
    }

    p {
      color: #ff3d58;
      font-size: 10rem;
      margin-left: 1rem;
    }
  }
}

.xx1-3 {
  width: 333rem;
  min-height: 30rem;
  background-color: #fff;
  margin-left: 20rem;
  border-radius: 5rem;
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;

  h1 {
    margin-left: 15rem;
    font-size: 11rem;
    color: #aaa;
  }

  button {
    background-color: #ff3d58;
    color: #fff;
    width: 60rem;
    height: 22rem;
    border-radius: 50rem;
    border: none;
    font-size: 12rem;
    line-height: 22rem;
    margin-right: 15rem;
  }
}
.threshold-3 {
  P {
    font-size: 11rem;

    position: absolute;
    right: 10rem;
    top: 36rem;
    color: #df0707;
  }
}

.left-4 {
  height: 78rem;
  background-size: 100% 100%;
  position: relative;
  background-image: url(https://mall.leyifan.com/static/h5/images/couponItemBg.png);
  margin-top: 10rem;
  margin-left: 20rem;
  /* min-height: 30rem; */
  width: 333rem;
  display: flex;
  align-content: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex-direction: row;

  /* margin-top: 3rem; */
  .box-4 {
    margin-top: -19rem;
    margin-left: 13rem;

    h1 {
      font-size: 14rem;
      color: #333;

      line-height: 20rem;
    }
  }

  p {
    font-size: 11rem;
    color: #aaa;
    font-weight: 500;
    margin-top: 2rem;
  }

  .right-4 {
    position: absolute;
    right: 10rem;
    top: 5rem;
    width: 60rem;
    height: 30rem;
    background-color: #fff;
    border-radius: 0rem 7rem 7rem 0rem;
    display: flex;
    align-items: center;
    justify-content: center;

    h3 {
      color: #ff3d58;
      font-size: 20rem;
      font-weight: 700;
      margin-left: -7rem;
    }

    p {
      color: #ff3d58;
      font-size: 10rem;
      margin-left: 1rem;
    }
  }
}

.xx1-4 {
  width: 333rem;
  min-height: 30rem;
  background-color: #fff;
  margin-left: 20rem;
  border-radius: 5rem;
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;

  h1 {
    margin-left: 15rem;
    font-size: 11rem;
    color: #aaa;
  }

  button {
    background-color: #ff3d58;
    color: #fff;
    width: 60rem;
    height: 22rem;
    border-radius: 50rem;
    border: none;
    font-size: 12rem;
    line-height: 22rem;
    margin-right: 15rem;
  }
}
.threshold-4 {
  P {
    font-size: 11rem;

    position: absolute;
    right: 10rem;
    top: 36rem;
    color: #ff3d58;
  }
}

.left-5 {
  height: 78rem;
  background-size: 100% 100%;
  position: relative;
  background-image: url(https://mall.leyifan.com/static/h5/images/couponItemBg.png);
  margin-top: 10rem;
  margin-left: 20rem;
  /* min-height: 30rem; */
  width: 333rem;
  display: flex;
  align-content: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex-direction: row;

  /* margin-top: 3rem; */
  .box-5 {
    margin-top: -19rem;
    margin-left: 13rem;

    h1 {
      font-size: 14rem;
      color: #333;

      line-height: 20rem;
    }
  }

  p {
    font-size: 11rem;
    color: #aaa;
    font-weight: 500;
    margin-top: 2rem;
  }

  .right-5 {
    position: absolute;
    right: 10rem;
    top: 5rem;
    width: 60rem;
    height: 30rem;
    background-color: #fff;
    border-radius: 0rem 7rem 7rem 0rem;
    display: flex;
    align-items: center;
    justify-content: center;

    h3 {
      color: #ff3d58;
      font-size: 20rem;
      font-weight: 700;
    }

    p {
      color: #ff3d58;
      font-size: 10rem;
      margin-left: 1rem;
    }
  }
}

.xx1-5 {
  width: 333rem;
  min-height: 30rem;
  background-color: #fff;
  margin-left: 20rem;
  border-radius: 5rem;
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;

  h1 {
    margin-left: 15rem;
    font-size: 11rem;
    color: #aaa;
  }

  button {
    background-color: #ff3d58;
    color: #fff;
    width: 60rem;
    height: 22rem;
    border-radius: 50rem;
    border: none;
    font-size: 12rem;
    line-height: 22rem;
    margin-right: 15rem;
  }
}
.threshold-5 {
  P {
    font-size: 11rem;

    position: absolute;
    right: 10rem;
    top: 36rem;
    color: #df0707;
  }
}

.left-6 {
  height: 78rem;
  background-size: 100% 100%;
  position: relative;
  background-image: url(https://mall.leyifan.com/static/h5/images/couponItemBg.png);
  margin-top: 10rem;
  margin-left: 20rem;
  /* min-height: 30rem; */
  width: 333rem;
  display: flex;
  align-content: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex-direction: row;

  /* margin-top: 3rem; */
  .box-6 {
    margin-top: -19rem;
    margin-left: 13rem;

    h1 {
      font-size: 14rem;
      color: #333;

      line-height: 20rem;
    }
  }

  p {
    font-size: 11rem;
    color: #aaa;
    font-weight: 500;
    margin-top: 2rem;
  }

  .right-6 {
    position: absolute;
    right: 10rem;
    top: 5rem;
    width: 60rem;
    height: 30rem;
    background-color: #fff;
    border-radius: 0rem 7rem 7rem 0rem;
    display: flex;
    align-items: center;
    justify-content: center;

    h3 {
      color: #ff3d58;
      font-size: 20rem;
      font-weight: 700;
      margin-left: -7rem;
    }

    p {
      font-size: 10rem;
      margin-left: 1rem;
      color: #ff3d58;
    }
  }
}

.xx1-6 {
  width: 333rem;
  min-height: 30rem;
  background-color: #fff;
  margin-left: 20rem;
  border-radius: 5rem;
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;

  h1 {
    margin-left: 15rem;
    font-size: 11rem;
    color: #aaa;
  }

  button {
    background-color: #ff3d58;
    color: #fff;
    width: 60rem;
    height: 22rem;
    border-radius: 50rem;
    border: none;
    font-size: 12rem;
    line-height: 22rem;
    margin-right: 15rem;
  }
}
.threshold-6 {
  P {
    font-size: 11rem;

    position: absolute;
    right: 10rem;
    top: 36rem;
    color: #df0707;
  }
}

.left-7 {
  height: 78rem;
  background-size: 100% 100%;
  position: relative;
  background-image: url(https://mall.leyifan.com/static/h5/images/couponItemBg.png);
  margin-top: 10rem;
  margin-left: 20rem;
  /* min-height: 30rem; */
  width: 333rem;
  display: flex;
  align-content: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex-direction: row;

  /* margin-top: 3rem; */
  .box-7 {
    margin-top: -19rem;
    margin-left: 13rem;

    h1 {
      font-size: 14rem;
      color: #333;

      line-height: 20rem;
    }
  }

  p {
    font-size: 11rem;
    color: #aaa;
    font-weight: 500;
    margin-top: 2rem;
  }

  .right-7 {
    position: absolute;
    right: 10rem;
    top: 5rem;
    width: 60rem;
    height: 30rem;
    background-color: #fff;
    border-radius: 0rem 7rem 7rem 0rem;
    display: flex;
    align-items: center;
    justify-content: center;

    h3 {
      color: #ff3d58;
      font-size: 20rem;
      font-weight: 700;
      margin-left: -7rem;
    }

    p {
      font-size: 10rem;
      margin-left: 1rem;
      color: #ff3d58;
    }
  }
}

.xx1-7 {
  width: 333rem;
  min-height: 30rem;
  background-color: #fff;
  margin-left: 20rem;
  border-radius: 5rem;
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;

  h1 {
    margin-left: 15rem;
    font-size: 11rem;
    color: #aaa;
  }

  button {
    background-color: #ff3d58;
    color: #fff;
    width: 60rem;
    height: 22rem;
    border-radius: 50rem;
    border: none;
    font-size: 12rem;
    line-height: 22rem;
    margin-right: 15rem;
  }
}
.threshold-7 {
  P {
    font-size: 11rem;

    position: absolute;
    right: 10rem;
    top: 36rem;
    color: #ff3d58;
  }
}

.left-8 {
  height: 78rem;
  background-size: 100% 100%;
  position: relative;
  background-image: url(https://mall.leyifan.com/static/h5/images/couponItemBg.png);
  margin-top: 10rem;
  margin-left: 20rem;
  /* min-height: 30rem; */
  width: 333rem;
  display: flex;
  align-content: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex-direction: row;

  /* margin-top: 3rem; */
  .box-8 {
    margin-top: -19rem;
    margin-left: 13rem;

    h1 {
      font-size: 14rem;
      color: #333;

      line-height: 20rem;
    }
  }

  p {
    font-size: 11rem;
    color: #aaa;
    font-weight: 500;
    margin-top: 2rem;
  }

  .right-8 {
    position: absolute;
    right: 10rem;
    top: 5rem;
    width: 60rem;
    height: 30rem;
    background-color: #fff;
    border-radius: 0rem 7rem 7rem 0rem;
    display: flex;
    align-items: center;
    justify-content: center;

    h3 {
      color: #ff3d58;
      font-size: 20rem;
      font-weight: 700;
    }

    p {
      font-size: 10rem;
      color: #ff3d58;
      margin-left: 1rem;
    }
  }
}

.xx1-8 {
  width: 333rem;
  min-height: 30rem;
  background-color: #fff;
  margin-left: 20rem;
  border-radius: 5rem;
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;

  h1 {
    margin-left: 15rem;
    font-size: 11rem;
    color: #aaa;
  }

  button {
    background-color: #ff3d58;
    color: #fff;
    width: 60rem;
    height: 22rem;
    border-radius: 50rem;
    border: none;
    font-size: 12rem;
    line-height: 22rem;
    margin-right: 15rem;
  }
}
.threshold-8 {
  P {
    font-size: 11rem;

    position: absolute;
    right: 10rem;
    top: 36rem;
    color: #ff3d58;
  }
}

.ending {
  h1 {
    display: flex;

    justify-content: center;
    margin-top: 19rem;
    color: #aaa;
  }
}
</style>